// TODO
// Use variables where we can in here
// Adjust position based on $effeckt-tooltip-arrow-size

@import "../_variables";

// Basic .effeck-tooltip
.effeckt-tooltip[data-effeckt-tooltip-text] {
  position: relative;
  // make tooltip text to be always on the same line
  // this prevent out of position tooltip
  display: inline-block;

  &::before, &::after {
    opacity: 0;
    transition: $effeckt-tooltip-transition-delay; // no delay on hover off
  }

  &:hover::before, &:hover::after {
    visibility: visible;
    opacity: 1;
    transition: $effeckt-tooltip-transition-delay $effeckt-tooltip-transition-duration; // slight delay on hover on
  }
}

// tooltip bubble
.effeckt-tooltip[data-effeckt-type="bubble"]{
  &::after { // text of tooltip
    content: attr(data-effeckt-tooltip-text);
    position: absolute;
    border-radius: 10px;
    background: $effeckt-tooltip-background;
    color: $effeckt-tooltip-forground;
    padding: 0.45rem 0.8rem;
    font-size: 90%;
    white-space: nowrap;
    visibility: hidden; // makes un-hoverable when hidden (opacity alone doesn't work)

    z-index: 2; //prevent collapse between another tooltip
  }

  &::before { // triangle / speech bubble arrow
    content: "";
    width: 0;
    height: 0;
    position: absolute;
  }
}

// bubble top and bottom
.effeckt-tooltip[data-effeckt-type="bubble"][data-effeckt-position="top"],
.effeckt-tooltip[data-effeckt-type="bubble"][data-effeckt-position="bottom"] {
  &::after {
    transform: translateX(-50%); // horizontal centering
    left:50%;
  }
  &:before {
    left: 50%;
    margin-left: -5px;
  }
}

// bubble orientation top
.effeckt-tooltip[data-effeckt-type="bubble"][data-effeckt-position="top"] {

  &::after, &::before {
    bottom: 125%;
  }

  &::before {
    border-top: $effeckt-tooltip-arrow-size solid $effeckt-tooltip-background;
    border-left: $effeckt-tooltip-arrow-size solid transparent;
    border-right: $effeckt-tooltip-arrow-size solid transparent;
    margin-bottom: -($effeckt-tooltip-arrow-size - 1); // one less pixel to prevent occational 1px gap
  }

  &:hover::before, &:hover::after {
    bottom: 115%;
  }
}
// bubble orientation bottom
.effeckt-tooltip[data-effeckt-type="bubble"][data-effeckt-position="bottom"] {
  &::after, &::before {
    top: 125%;
  }

  &::before {
    border-bottom: $effeckt-tooltip-arrow-size solid $effeckt-tooltip-background;
    border-left: $effeckt-tooltip-arrow-size solid transparent;
    border-right: $effeckt-tooltip-arrow-size solid transparent;
    margin-top: -($effeckt-tooltip-arrow-size - 1); // one less pixel to prevent occational 1px gap
  }

  &:hover::before, &:hover::after {
    top: 115%;
  }
}

// bubble top and bottom
.effeckt-tooltip[data-effeckt-type="bubble"][data-effeckt-position="right"],
.effeckt-tooltip[data-effeckt-type="bubble"][data-effeckt-position="left"] {
  &::after, &:before {
    top:45%;
    transform: translateY(-45%); // half font-size size
    margin-top:2px;
  }
}

// bubble orientation right
.effeckt-tooltip[data-effeckt-type="bubble"][data-effeckt-position="right"] {

  &::after, &::before {
    left: 115%;
  }

  &::before {
    border-right: $effeckt-tooltip-arrow-size solid $effeckt-tooltip-background;
    border-top: $effeckt-tooltip-arrow-size solid transparent;
    border-bottom: $effeckt-tooltip-arrow-size solid transparent;
    margin-left: -($effeckt-tooltip-arrow-size - 1); // one less pixel to prevent occational 1px gap
  }

  &:hover::before, &:hover::after {
    left: 105%;
  }
}

// bubble orientation left
.effeckt-tooltip[data-effeckt-type="bubble"][data-effeckt-position="left"] {

  &::after, &::before {
    right: 115%;
  }

  &::before {
    border-left: $effeckt-tooltip-arrow-size solid $effeckt-tooltip-background;
    border-top: $effeckt-tooltip-arrow-size solid transparent;
    border-bottom: $effeckt-tooltip-arrow-size solid transparent;
    margin-right: -($effeckt-tooltip-arrow-size - 1); // one less pixel to prevent occational 1px gap
  }

  &:hover::before, &:hover::after {
    right: 105%;
  }
}